<template>
  <div>
    <div class="card1">
      <div class="left">
        <p class="p1"><span>订单编号:</span><span>{{orderList.newOrderId}}</span></p>
        <div v-if="activeStep===1?true:false">
          <p class="p2" style="margin-top: 35px"><i class="el-icon-time" style="color: #42b983"></i><span>订单状态:</span><span>等待用户付款</span></p>
        </div>
        <div v-if="activeStep===2?true:false">
          <p class="p2"><i class="el-icon-s-order" style="color: crimson"></i><span>订单状态:</span><span>待商户接单</span></p><p>
            <el-button type="primary" style="margin-left: 50px;" @click="updateorderstatus(orderList.newOrderId,3)">开始接单</el-button>
          </p>
        </div>
        <div v-if="activeStep===3?true:false">
          <p class="p2"><i class="el-icon-truck" style="color: #D5637E"></i><span>订单状态:</span><span>待商户发货</span></p>
          <p><el-button type="primary" style="margin-left: 50px;" @click="updateorderstatus(orderList.newOrderId,4)">开始发货</el-button></p>
        </div>
        <div v-if="activeStep===4?true:false">
          <p class="p2" style="margin-top: 35px"><i class="el-icon-box"></i><span>订单状态:</span><span>等待用户确认收货</span></p>
        </div>
        <div v-if="activeStep===5?true:false">
          <p class="p2"><i class="el-icon-check" style="color: green"></i><span>订单状态:</span><span>已完成订单</span>
          </p>
        </div>

        <p class="step">
          <el-steps :space="160" :active="activeStep" finish-status="success" align-center>
            <el-step title="提交订单"></el-step>
            <el-step title="付款成功"></el-step>
            <el-step title="花店接单"></el-step>
            <el-step title="花店发货"></el-step>
            <el-step title="确认收货"></el-step>
          </el-steps>
        </p>
      </div>
    </div>
    <div class="card2">
      <div class="container">
        <el-descriptions class="margin-top" title="收货信息" :column="1">
          <el-descriptions-item label="收货人"><span v-text="orderList.accountName"></span></el-descriptions-item>
          <el-descriptions-item label="手机号"><span v-text="orderList.phoneNumber"></span></el-descriptions-item>
          <el-descriptions-item label="邮箱"><span v-text="orderList.email"></span></el-descriptions-item>
          <el-descriptions-item label="性别">
            <span v-if="orderList.gender === 0">男</span>
            <span v-else>女</span>
          </el-descriptions-item>
          <el-descriptions-item label="收货地址">
            <span
                v-text="orderList.proviceName+orderList.areaName+orderList.cityName+orderList.streetName+orderList.villagesName"></span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="card3">
      <el-table :data="orderItemData" border stripe style="width: 100%;">
        <el-table-column prop="newOrderId" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="flowerName" label="商品名" align="center"></el-table-column>
        <el-table-column prop="buyCount" label="购买数量" align="center"></el-table-column>
        <el-table-column prop="flowerPrice" label="商品单价（元）" align="center"></el-table-column>
        <el-table-column prop="subTotal" label="小计（元）" align="center"></el-table-column>
        <el-table-column prop="createTime" label="下单时间" align="center"></el-table-column>
        <el-table-column prop="contentId" label="评价情况" align="center">
          <template slot-scope="{row}">
          <span v-if="row.contentId !== 0">已评价<p/>
            <el-button type="text" @click="detailcomment(row.contentId,row.isDelete)">评价详情</el-button>
          </span>
            <span v-else>未评价</span>
          </template>
        </el-table-column>
        <el-table-column prop="isDelete" label="评价状态" align="center">
          <template slot-scope="{row}">
          <span v-if="row.isDelete === 2">此评价已被举报<p/>
          </span>
            <span v-else>正常</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="remark" label="投诉原因" align="center">
          <template slot-scope="{row}">
              <span v-if="row.remark === ''">无</span>
              <span v-else>{{row.remark}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="card4">
      <div class="right">
         我爱你信不信
    </div>
    </div>
    
    <template>
      <el-dialog title="评价详情" :visible.sync="outerVisible" close-on-press-escape>
        <el-dialog width="30%" title="投诉此评价原因" :visible.sync="innerVisible" append-to-body close-on-press-escape>
          <el-input v-model="complaintCommentReason" placeholder="请填写投诉理由" maxlength="30" show-word-limit/>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="complaintcommment()">投诉评价</el-button>
            <el-button @click="innerVisible = false">退出</el-button>
          </div>
        </el-dialog>
<!--评价详情-->
        <div>
          <el-descriptions class="margin-top" :column="1">
            <el-descriptions-item label="评价编号"><span v-text="commentList.contentId"></span></el-descriptions-item>
            <el-descriptions-item label="评价内容"><span v-text="commentList.content"></span></el-descriptions-item>
            <el-descriptions-item label="商品名"><span v-text="commentList.flowerName"></span></el-descriptions-item>
            <el-descriptions-item label="评价用户"><span v-text="commentList.accountName"></span></el-descriptions-item>
            <el-descriptions-item label="评价照片"><span v-text="commentList.commentImg"></span></el-descriptions-item>
            <el-descriptions-item label="评分">
              <el-rate v-model="commentList.rateScore" disabled  text-color="#ff9900" ></el-rate>
              </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div slot="footer" class="dialog-footer">
            <span v-if="isDelete !== 2"><el-button type="warning" @click="innerVisible = true">投诉此评价</el-button></span>
            <span v-else><el-button type="danger" @click="cancelcomplaintcommment()">撤销此投诉</el-button></span>
            &nbsp;<span><el-button @click="outerVisible = false">退出</el-button></span>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<script>
export default {
  name: "OrderItemView",
  data() {
    return {
      //步骤状态
      activeStep: 1,
      //订单详情数据
      orderItemData: [],
      //订单数据
      orderList: [{
        newOrderId: '',
        accountName: '',
        phoneNumber: '',
        email: '',
        gender: 0,
        proviceName: '',
        areaName: '',
        cityName: '',
        streetName: '',
        villagesName: '',
        status: 0,
        contentId: 0,
      }],
      //评价详情数据
      commentList: [],
      outerVisible: false,
      innerVisible: false,
      //投诉评价原因
      complaintCommentReason: '',
      isDelete:0,
    }
  },
  methods: {
    //查询订单
    selectFlowerOrderByOrderId() {
      this.$axios.get("/flowerorder/selectFlowerOrderByOrderId",
          {
            params: {
              orderId: this.$route.query.orderId
            }
          }).then(response => {
        console.log(response)
        if (response.data.code === 200) {
          this.orderList = response.data.data;
          this.activeStep = this.orderList.status;
        }
      });
    },
    //查询订单详情
    selectFlowerOrderItemsByOrderId() {
      console.log("----查询开始订单详情----");
      this.$axios.get("/flowerorderitem/selectFlowerOrderItemsByOrderId",
          {
            params: {
              orderId: this.$route.query.orderId
            }
          }).then(response => {
        console.log(response)
        if (response.data.code === 200) {
          this.orderItemData = response.data.data;
        }
      });

    },
    //查看评价
    detailcomment(contentId,isDelete) {
      this.outerVisible = true;
      this.orderItemData.contentId = contentId;
      this.isDelete = isDelete;
      this.selectFlowerCommentByCommentId();
    },
    //评价详情
    selectFlowerCommentByCommentId(){
      this.$axios.get("/flowercomment/selectFlowerCommentByCommentId",
          {
            params: {
              contentId: this.orderItemData.contentId,
            }
          }).then(response => {
        console.log(response)
        if (response.data.code === 200) {
          this.commentList = response.data.data;
        }
      });
    },
    //举报评价提示确认
    complaintcommment() {
      this.$confirm('确认投诉此评论吗？')
          .then(() => {
            this.$axios.get("/flowercomment/updatecomplaintFlowerCommentByCommentId",
                {
                  params: {
                    contentId: this.orderItemData.contentId,
                    remark: this.complaintCommentReason,
                    isDelete: 2,
                  }
                }
            ).then(response => {
              console.log(response)
              this.$message({
                type: "success",
                message: "投诉成功",
              });
              this.outerVisible = false;
              this.innerVisible = false;
              this.complaintCommentReason = '';
              this.selectFlowerOrderItemsByOrderId();
            })
          })
          .catch(()=>{})
    },
    //撤销举报评价
    cancelcomplaintcommment() {
      this.$confirm('确认撤销此评论吗？')
          .then(() => {
            this.$axios.get("/flowercomment/updatecomplaintFlowerCommentByCommentId",
                {
                  params: {
                    contentId: this.orderItemData.contentId,
                    remark: "",
                    isDelete: 0,
                  }
                }
            ).then(response => {
              if (response.data.code===200){
                this.$message({
                  type: "success",
                  message: "已撤销举报",
                });
                this.outerVisible = false;
                this.innerVisible = false;
                this.complaintCommentReason = '';
                this.selectFlowerOrderItemsByOrderId();
              }
            })
          }).catch(()=>{})
    },
    
    //商家接单
    updateorderstatus(orderId,status){
      //接单提示
      if(status ===3){
        this.$confirm('确认接单吗？').then(()=>{
          this.$axios.get("/flowerorder/updateFlowerOrderStatusByOrderId",{
            params:{
              orderId:orderId,
              status:status,
            }
          }).then(response =>{
            if (response.data.code ===200){
              this.$message({
                type: "success",
                message: "接单成功",
              });
              this.selectFlowerOrderByOrderId();
            }
          })
        }).catch(()=>{})
      }
      //发货提示
      if(status ===4){
        this.$confirm('确认发货吗？').then(()=>{
          this.$axios.get("/flowerorder/updateFlowerOrderStatusByOrderId",{
            params:{
              orderId:orderId,
              status:status,
            }
          }).then(response =>{
            if (response.data.code ===200){
              this.$message({
                type: "success",
                message: "发货成功",
              });
              this.selectFlowerOrderByOrderId();
            }
          })
        }).catch(()=>{})
      }
      
    }

  },
  created() {
    this.selectFlowerOrderByOrderId();
    this.selectFlowerOrderItemsByOrderId();
  },
  
}
</script>


<style scoped lang="less">
.card1 {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  margin: 30px 100px;
  height: 150px;
}

.card1 .left {
  text-align: left;
  margin-left: 50px;
}

.card1 .left .p1 {
  font-size: 13px;
  color: gray;
  margin: 10px;
}

.card1 .left .p2 {
  font-size: 22px;
}

.card1 .left i {
  font-size: 30px;
  vertical-align: middle;
  margin-right: 5px;
  color: #ff9100;
}

.card1 .step {
  width: 100%;
  position: absolute;
  top: 130px;
  left: 500px;
}

.card2 {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  margin: 30px 100px;
}

.card2 .container {
  margin: 15px;
}

.card3 {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  margin: 30px 100px;
}

.card4 {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  margin: 30px 100px;
}

.card4 .left {
  text-align: right;
}

.card4 .total {
  margin-right: 200px;
}

.card4 .right {
  position: absolute;
  top: 802px;
  right: 150px;
}


</style>